<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数</title>
</head>
<body>
    <span>点击后2秒钟后变成粉色</span>
    <div class="div" id="div1"></div>
    <div class="div" id="div2"></div>
</body>

<script>
    //ES6 允许使用箭头（=>）定义函数。
    //申明一个箭头函数
    let fn1 = function(){} //传统写法
    let fn2 =(a,b)=>{return a+b} //箭头函数写法
    console.log(fn2(1,5));
    
    //特性1 this是静态的，始终指向函数申明所在的作用域下的this的值。
    function getName1(){
        console.log(`传统函数`+this.name);
        
    }
    let getName2 = () => {
        console.log(`箭头函数`+this.name);
    }
    //设置Window的对象属性
    window.name='班杰明';
    const school = {
        name: "托尔"
    };
    //直接调用时候无差别
    getName1();
    getName2();

    //使用call方法调用
    getName1.call(school);
    getName2.call(school);


    //特性2 无法作为对象的构造函数
    let porsen = (name,age) =>{
        this.name = name;
        this.age = age;
    }
    // let me = new porsen('欧阳娜娜',18);//报错
    // console.log(me);

    //特性3 无法使用arguments变量
    let fn3 = () => {
        console.log(arguments);//报错
    }
    
    //特性4 特殊情况省略符号
        //情况1 参数有且只有一个时候，省略()
        let fn4 = a =>{
            return a;
        };
        //情况2 当函数只有返回值语句时候，省略 {} 并且省略 return 
        let fn5 = a => a*2;

    console.log(fn4(7));
    console.log(fn5(5));

    //箭头函数实际操作

    //操作1 修改div的颜色，并且在2秒后执行
    //传统写法 无法获取到Window的this
    let element1 = document.getElementById('div1');
    element1.addEventListener('click',function(){
    let _this = this;
        setTimeout(function(){
            _this.style.background = 'pink';
        },2000);
    });

    //箭头函数写法
    let element2 = document.getElementById('div2');
    element2.addEventListener('click',function(){
        setTimeout(()=>{
            this.style.background = 'pink';
        },2000);
    })


    //操作2 找出数组中偶数
    //传统写法
    let arr = [11,32,56,55,98,101];
    const result1 =  arr.filter(function(item){
        if(item%2==0){
            return true;
        }else{
            return false;
        };
    });
    console.log(result1);

    //箭头函数写法
    const result2 = arr.filter( itam => itam%2===0 )
    console.log(result2);


</script>
<style>
.div{
    width: 300px;
    height: 300px;
    background-color:skyblue;
    margin: 10px;;
}
</style>
</html>